import { Meta, Canvas, Story } from '@storybook/addon-docs';
import { DragAndDropStory } from './stories/DragAndDropStory';
import { COLUMNS as columns } from './stories/data';

<Meta title="Packages/Draggable/[patterns]" />

# Patterns

## Drag and Drop

Use a combination of `Draggable`, `DraggableList`, and `Dropzone` to create a
drag and drop experience.

<Canvas>
  <Story
    name="Drag and drop"
    args={{
      columns,
      hasDropIndicator: true,
      hasPlaceholder: true,
      isCompact: false,
      isHorizontal: false,
      isBare: false
    }}
    argTypes={{
      columns: { table: { category: 'Story' } },
      hasDropIndicator: { table: { category: 'Story' } },
      hasPlaceholder: { table: { category: 'Story' } },
      isCompact: { table: { category: 'Story' } },
      isHorizontal: { table: { category: 'Story' } },
      isBare: { table: { category: 'Story' } }
    }}
  >
    {args => <DragAndDropStory {...args} />}
  </Story>
</Canvas>
